<template>
  <a-form style="justify-content: space-between;margin-bottom: 15px" layout="inline">
    <a-form-item label="语言">
      <a-select
          size="small"
          ref="select"
          v-model:value="config.language"
          style="width: 120px"
          @focus="focus"
          @change="handleSelectLanguage"
      >
        <a-select-option  v-for="(item,index) in Object.keys(languages)" :key="index" :value="item">{{item}}</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item>
      <SettingOutlined @click="showModal" style="font-size: 16px"></SettingOutlined>
    </a-form-item>
  </a-form>
  <a-modal v-model:open="open" title="设置" @ok="handleOk">
    <div class="setting">
      <a-divider orientation="left">基础设置</a-divider>
      <a-form
          name="basic"
          layout="horizontal"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 8 }"
      >
        <a-form-item label="风格">
          <a-select
              size="small"
              ref="select"
              v-model:value="config.theme"
              style="width: 120px"
              @focus="focus"
          >
            <a-select-option  v-for="(item,index) in ['default' ,...Object.keys(themes)]" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="缩进">
          <a-select
              size="small"
              ref="select"
              v-model:value="config.tabSize"
              style="width: 120px"
              @focus="focus"
          >
            <a-select-option  v-for="(item,index) in [2,4,6,8]" :key="index" :value="item">{{item}}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="预览">
          <a-switch v-model:checked="config.disabled"  >
            <template #checkedChildren><check-outlined /></template>
            <template #unCheckedChildren><close-outlined /></template>

          </a-switch>
        </a-form-item>

      </a-form>
      <a-divider orientation="left">布局设置</a-divider>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>

import {PropType, ref} from "vue";
import {SettingOutlined,CheckOutlined,CloseOutlined} from '@ant-design/icons-vue';
const emit = defineEmits(['changeLanguage'])
defineProps({
  config: {
    type: Object,
    required: true
  },
  languages: {
    type: Array as PropType<Array<string>>,
    required: true
  },
  themes: {
    type: Array as PropType<Array<string>>,
    required: true
  }
})

//切换语言
const handleSelectLanguage = (event: any) => {
  console.log(event)
  emit('changeLanguage', event)
}
const language = ref("cpp")


//弹窗
const open = ref<boolean>(false);
const showModal = () => {
  open.value = true;
};
const handleOk = (e: MouseEvent) => {
  open.value = false;
};
</script>

<style scoped>

</style>
